<template>
  <div>
    <Appheader v-if="!isshow_top"></Appheader>
    <div class="top_header" v-if="isshow_top">
      <div class="header">
        <div class="header_left flex" @click="logo">
          <!-- <img src="../../assets/topnavhome.png" alt /> -->
          艺传首页
          <!-- <img class="logo" src="../../assets/logo.png" alt @click="logo" /> -->
        </div>
        <div class="header_right">
          <div class="header_right_a vv" @click="toItem(3)">学习中心</div>
          <div class="header_right_a vv" @click="toItem(0)">我的订单</div>
          <div
            class="header_right_a flex aa"
            :class="aabg==true?'bga':''"
            @mouseover="aa"
            @mouseleave="aa_go"
          >
            手机学习
            <img src="../../assets/black_down.png" alt />
            <div class="appcode" v-show="isaadown">
              <div>
                <img src="../../assets/Wx2.png" alt />
                <div>随时逛&nbsp;&nbsp;&nbsp;随时看</div>
              </div>
            </div>
          </div>
          <div class="header_right_a vv" @click="toAise('帮助')">帮助</div>
          <div class="header_right_a bb flex">
            <div class="header_right_a bb2" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <p :class="hide_addr==true?'bb2_p1':''">{{info_user.phone}}</p>
              <p v-show="hide_addr" @click="toItem(5)" class="bb2_p2">账号设置</p>
              <p v-show="hide_addr" @click="toItem(0)" class="bb2_p2">我的订单</p>
              <p v-show="hide_addr" @click="toItem(1)" class="bb2_p2">购物车</p>
              <!-- <p v-show="hide_addr" @click="toItem(2)" class="bb2_p2">收货地址</p> -->
              <p v-show="hide_addr" @click="toItem(3)" class="bb2_p2">我的课程</p>
            </div>
          </div>
          <div class="header_right_a red_color" @click="outlogin">退出</div>
        </div>
      </div>
    </div>
    <div class="second_nav" v-if="isshow_top">
      <div class="header_second flex">
        <img class="logo" src="../../assets/logo.png" alt @click="logo" />学习中心
      </div>
    </div>
    <div class="vedio" v-if="info.length!=0">
      <div class="video_left">
        <video autoplay controls v-if="vedio" :src="vedio"></video>
        <a class="download" v-if="vedio" :href="vedio" download="艺传天下_视频" target="_blank">
          下载
        </a>
        <img src alt v-else />
      </div>
      <div class="video_right">
        <ul v-for="(list,index) in info" :key="index">
          <div>{{list.zhang}}</div>
          <li v-for="(item,index) in list.ykCourses" :key="index">
            <div
              class="couse"
              v-if="item.ykVideo"
              :class="vedioId==item.ykVideo.id?'active':''"
              @click="toggleA(item.ykVideo.id,item.ykVideo.url1)"
            >
              <img src="../../assets/video.png" alt v-if="vedioId!=item.ykVideo.id" />
              <img src="../../assets/video2.png" alt v-else />
              {{item.ykVideo.sectionName}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="vedio_else" v-else>
      <img src="../../assets/none.png" alt />
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../header";
import Appfooter from "../footer";
import { info, ykVideo, playMp4 } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      userid: "",
      ids: "",
      info: [],
      info_user: {},
      vedio: "",
      vedioId: "",
      isshow_top: false,
      aabg: false,
      isaadown: false,
      hide_addr: false
    };
  },
  computed: {},
  created() {},
  mounted() {
    if (this.$route.meta.router_path.indexOf("main") != -1) {
      this.isshow_top = true;
    } else {
      this.isshow_top = false;
    }
    this.userid = localStorage.getItem("YKuserid");
    this.ids = this.$route.params.id || sessionStorage.getItem("videoId");
    sessionStorage.setItem("videoId", this.ids);
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        userId: this.userid,
        goodsId: this.ids
      };
      ykVideo(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.info = res.data.rows;
            if (res.data.rows[0].ykCourses[0].ykVideo != null) {
              this.vedioId = res.data.rows[0].ykCourses[0].ykVideo.id;
              this.jiemi(res.data.rows[0].ykCourses[0].ykVideo.url1);
            }
          }
        })
        .catch(e => {});
      let msg2 = {
        id: localStorage.getItem("YKuserid")
      };
      info(this.qs(msg2))
        .then(res => {
          if (res.data.code == 0) {
            this.info_user = res.data.ykUser;
          }
        })
        .catch(e => {});
    },
    jiemi(data) {
      let msg2 = {
        fileName: data
      };
      playMp4(this.qs(msg2))
        .then(res => {
          this.vedio = res.data;
        })
        .catch(e => {});
    },
    toggleA(ide, url) {
      this.vedioId = ide;
      this.jiemi(url);
    },
    toItem(i) {
      this.active = i;
      if (i == 0) {
        this.$router.replace({
          name: "order"
        });
      } else if (i == 1) {
        this.$router.replace({
          name: "car"
        });
      } else if (i == 3) {
        this.$router.replace({
          name: "myKecheng"
        });
      } else if (i == 4) {
        this.$router.replace({
          name: "editMsg"
        });
      } else if (i == 5) {
        this.$router.replace({
          name: "account"
        });
      } else if (i == 6) {
        this.$router.replace({
          name: "tiku"
        });
      } else if (i == 7) {
        this.$router.replace({
          name: "dayi"
        });
      }
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    logo() {
      this.$router.replace({
        name: "home"
      });
    },
    aa() {
      this.isaadown = true;
      this.aabg = true;
    },
    aa_go() {
      this.isaadown = false;
      this.aabg = false;
    },
    mouseOver() {
      this.hide_addr = true;
    },
    mouseLeave() {
      this.hide_addr = false;
    },
    outlogin() {
      let that = this;
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      outlogin(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          that.$router.replace({
            name: "home"
          });
          if (res.data.code == 0) {
            localStorage.removeItem("YKuserid");
            localStorage.removeItem("YKuserphone");
          }
        })
        .catch(e => {});
    },
    toAise(name) {
      this.$router.replace({
        name: "asideCon",
        params: {
          title: name
        }
      });
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
@import "../../assets/css/main.scss";
.vedio {
  width: 1200px;
  margin: 30px auto;
  display: flex;
}
.video_left{
  position: relative;
}
.download{
  width:80px;
  height:30px;
  line-height: 30px;
  text-align: center;
  color:#fff;
  border-radius: 10px;
  background: rgba(0,0,0,.2);
  cursor: pointer;
  position:absolute;
  top:20px;
  right:20px;
  display: inline-block;
  text-decoration: none;
}
.download:hover{
  background:#d81417;
}
video,
.video_left > img {
  width: 861px;
  height: 441px;
}
.video_right {
  width: 298px;
  height:441px;
  overflow-y: scroll;
  padding-bottom: 50px;
  background: #363640;
  padding-top: 20px;
}
/*滚动条样式*/
.video_right::-webkit-scrollbar{
  width:4px;
}
.video_right::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.video_right::-webkit-scrollbar-track{
  border-radius: 0px;
  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.1);
}
ul {
  margin: 0 19px;
  font-size: 14px;
  font-weight: bold;
  color: #c9a750;
}
ul > div {
  margin-bottom: 15px;
}
li {
  margin-bottom: 10px;
  cursor: pointer;
}
.couse {
  display: flex;
  color: #dad4d6;
}
.couse > img {
  width: 13px;
  height: 13px;
  margin-left: 19px;
  margin-right: 4px;
  margin-top: 4px;
}
.active {
  color: #c9a750 !important;
}
.vedio_else > img {
  width: 458px;
  height: auto;
  margin: 0 auto;
}
</style>
